<template>
  <div class="blog-post">
    <h4 class="title">{{ postTitle }}</h4>
    <p style="color: gray">{{ postContent }}</p>
    <button @click="increment">子组件+1</button>
    <p>{{injectedParam.content}}</p>
    <button @click="parentIncrement">父组件+1 value:{{ parentCount }}</button>
  </div>
</template>
<script setup>
import { inject } from 'vue'
import { inJectionKey} from './keys.js'
/**
 *  🍓inject 依赖注入
 */
const injectedParam = inject(inJectionKey)
const { count: parentCount, increment: parentIncrement } = inject('parentCounter')
/**
 * 🍓props 属性
 * 1)数组形式
 * 2)对象形式
 * 
 * 模板中直接使用
 * js中需要用props调用
 */
// const props = defineProps(['title','content'])
const props = defineProps(
  {
    postTitle: {
      type: String,
      default: () =>'未定义'
    },
    postContent: {
      type: String,
      default: () => '未定义'
    }
  }
)
/**
 *  🍓父子组件双向绑定
 */
const countModel = defineModel('count')
const increment = () => {
  countModel.value++
}

console.log('props属性在js中的调用', props.postTitle, props.postContent)
</script>
<style scoped>
.blog-post {
  .title {
    cursor: pointer;
  }
}
</style>